<template>
  <el-skeleton :loading="loading">
    <div class="head">
      <div>学科：{{ subjectName }}</div>
      <div class="class-time">上课时间：{{ listData.startDate }}</div>
    </div>
    <div class="class-times-container" v-if="lessonData.length">
      <!--     github issue  https://github.com/SortableJS/vue.draggable.next/issues/140     -->
      <draggable :modelValue="lessonData" @update:modelValue="dragSortHandle" animation="250" item-key="id">
        <template #item="{ element, index }">
          <DataComponent :data="element" :index="index" @step-change="stepChange($event)"/>
        </template>
      </draggable>
    </div>
  </el-skeleton>
</template>

<script lang="ts">
import { ref, inject, computed } from 'vue'
import draggable from 'vuedraggable';
import EmptyComponent from './empty.vue';
import DataComponent from './data.vue';
import $ from '$';
// import store from './store';

export default {
  components: { draggable, DataComponent, EmptyComponent },
  props: {
    lessonData: {
      type: Object,
      default: () => ({})
    },
    listData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    let [ loading, setLoading ] = $.useState(false);
    let subjectName = ref($.storage.get('subject').name)

    // const getClassTimes = (() => {
    //   let fn = () => {
    //     setLoading(true);

    //     // $.http.post('/admin/teachTimes/query', { planId: planInfo.id }).then(res => store.commit('set_times_list', res.json)).finally(() => setLoading(false));
    //   }; fn();
    //   return fn;
    // })();

    const dragSortHandle = async (list) => {
      let params = list.map((data, idx) => ({ id: data.id, sortNum: idx + 1 }));
      let res = await $.http.json('/admin/teachTimes/batchUpdate', params);
    }

    // $.emitter.on('class-times-change', getClassTimes);
    const stepChange = (data) => {
      emit('stepChange', data )
    }

    return { loading, dragSortHandle, subjectName, stepChange }
  }
}
</script>
<style lang="scss" scoped>
.head {
  color: #999999;
  display: flex;
  margin-bottom: 20px;
  .class-time {
    margin-left: 20px;
  }
}
</style>
